<!--留样计划-->

<template>
  <div class="containerBox wrap">
    <cusCard>
      <div class="searchBox">

        <el-form :model="sampleForm" :inline="true">
          <el-form-item label="留样日期">
            <el-date-picker v-model="sampleForm.sampleTime" type="daterange" format="YYYY-MM-DD"
              value-format="YYYY-MM-DD" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
          </el-form-item>
          <el-form-item label="留样餐段">
            <el-select v-model="sampleForm.mealSegmentId" placeholder="请选择留样餐段" @change="searchHandler">
              <el-option v-for="item in mealList" :key="item.id" :label="item.mealSegmentName" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="设备名称">
            <el-select v-model="sampleForm.deviceId" placeholder="请选择设备名称" @change="searchHandler">
              <el-option v-for="item in deviceList" :key="item.deviceId" :label="item.deviceName"
                :value="item.deviceId" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <cusButton color="#0052D9" @click="searchHandler">查询</cusButton>
            <cusButton CssObj="border-color:#0052D9;color:#0052D9" @click="resetHandler">重置
            </cusButton>
          </el-form-item>
        </el-form>
      </div>
    </cusCard>
    <cusCard class="cmt-16 wrap-table">
      <cusButton color="#0052D9" @click="addHandler('add')">
        <i-ep-plus />添加
      </cusButton>
      <cusTable :tableData="sampleTableData" :tableColumns="tableColumns" @changeCol="changeCol" @changeRow="changeRow"
        :loading="loading" :height="460" :showSelect="false">
        <template #source="{ row }">
          <p>{{ row.source == 1 ? '小程序' : ' 后台' }}</p>
        </template>

        <template #dishList="{ row }">
          <div class=" flex justify-center ">

            <el-popover placement="top" effect="dark" :width="200" trigger="hover"
              :content="showDishedINfo(row.platformDishList)">
              <template #reference>

                <div class="popContent cm-ellipsis">
                  {{ showDishedINfo(row.platformDishList) }}
                </div>

              </template>

            </el-popover>

          </div>
        </template>

        <template #operation="{ row }">
          <cusButton style="color:#0052D9;padding:0" :text="true" @click="addHandler('edit', row)">编辑
          </cusButton>
          <el-popconfirm width="250" confirm-button-text="确认" cancel-button-text="取消" :title="`确认删除本次留样计划吗?`"
            @confirm="delHandler(row)">
            <template #reference>
              <cusButton style="color:#0052D9;padding:0" :text="true">删除</cusButton>
            </template>
          </el-popconfirm>
        </template>
      </cusTable>

      <div class="cmt-16 float-right">
        <cusPagination @handleSizeChange="sizeChange" @handleCurrentChange="currentChange" :all="pageObj">
        </cusPagination>
      </div>
    </cusCard>

    <editSample ref="editDialogRef" @onInit="getKeepPlanList"></editSample>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import editSample from "./components/editSample.vue";
import { reqKeepPlanList, reqDeletePlan, reqUnitAllDevice } from "@/api/business/device";
import { reqMealList, } from "@/api/business/dishes";
import { getThisWeekTime } from '@/utils/time'
const router = useRouter();

const formOrigin = () => ({
  mealSegmentId: "",
  sampleTime: [],
  deviceId: ''
});

const sampleForm = ref(formOrigin());


const pageInit = () => ({
  total: 0,
  page: 1,
  pageSize: 10,
});
const pageObj = ref(pageInit());
const loading = ref(false);

const searchHandler = () => {
  getKeepPlanList();
};


// 重置查询
const resetHandler = () => {
  sampleForm.value = formOrigin();
  pageObj.value = pageInit();
  sampleForm.value.sampleTime = getThisWeekTime()
  getKeepPlanList();
};
const sizeChange = (val: number) => {
  pageObj.value.pageSize = val;
  getKeepPlanList();
};

const currentChange = (val: number) => {
  pageObj.value.page = val;
  getKeepPlanList();
};

const editDialogRef = ref(null);
const addHandler = (type, row) => {
  editDialogRef.value.mealList = mealList.value
  if (type == "edit") {
    // console.log(row)
    let { gmtCook, mealSegmentId, deviceId, platformDishList, id } = row;
    editDialogRef.value.show(platformDishList);
    editDialogRef.value.sampleForm = { gmtCook, mealSegmentId, deviceId, id };
    return;
  }
  editDialogRef.value.show();

};

// 表格列数据
const tableColumns = reactive([
  { label: "留样日期", prop: "gmtCook", width: "150", sortable: true },
  { label: "餐段", prop: "mealSegmentName", },
  { label: "菜肴", prop: "dishList", slot: true, width: "200" },
  { label: "创建人", prop: "operator" },
  { label: "留样设备ID", prop: "machineCode", width: "200", },
  { label: "设备名称", prop: "deviceName", },
  { label: "来源", prop: "source", slot: true },
  {
    label: "操作",
    prop: "operation",
    slot: true,
    width: "180",
    fixed: "right",
  },
]);

const sampleTableData = ref([]);

// 请求留样计划列表
const getKeepPlanList = () => {
  if (!sampleForm.value.sampleTime) {
    ElMessage.info('请选择日期')
    return false
  }
  loading.value = true;
  reqKeepPlanList({
    currentPage: pageObj.value.page,
    pageSize: pageObj.value.pageSize,
    mealSegmentId: sampleForm.value.mealSegmentId,
    deviceId: sampleForm.value.deviceId,
    beginTime: sampleForm.value?.sampleTime[0],
    endTime: sampleForm.value?.sampleTime[1],
  }).then((res) => {
    loading.value = false;
    if (res.code == 1) {
      sampleTableData.value = res.data.list;
      pageObj.value.total = res.data.total;
    } else {
      ElMessage.error(res.msg)
    }
  });
};
// 删除计划
const delHandler = (row) => {
  reqDeletePlan({
    id: row.id,
  }).then((res) => {
    if (res.code == 1) {
      ElMessage.success("删除成功");
      getKeepPlanList();
    } else {
      ElMessage.info(res.msg);
    }
  });
};
// 餐段列表
const mealList = ref([]);
const getMealList = () => {
  reqMealList({
    currentPage: 1,
    pageSize: 3000,
  }).then((res) => {
    loading.value = false;
    if (res.code == 1) {
      mealList.value = res.data.list;
    }
  });
};

// 设备列表
const deviceList = ref([])
const getDeviceList = () => {
  reqUnitAllDevice().then((res) => {
    loading.value = false;
    if (res.code == 1) {
      deviceList.value = res.data
    }
  });
};

const showDishedINfo = (val) => {
  let ctx = ''
  val.forEach(el => {
    ctx = `${ctx} ${el.dishName} ,  `
  });
  return ctx
}

onMounted(() => {
  sampleForm.value.sampleTime = getThisWeekTime()
  getDeviceList()
  getMealList()
  getKeepPlanList();

});

const editSampleRef = ref(null);
</script>

<style lang="scss" scoped>
.popContent {
  width: 100%;
}
</style>